<template>
 <div>
      <router-view  @tabchange="setSelected"></router-view>
    <mt-tabbar v-model="selected">
  <mt-tab-item id="home">
    <img slot="icon"    :src="selected=='home'?'https://media.kaolaplay.com/editWait.png':'https://media.kaolaplay.com/editWait2.png'">
  </mt-tab-item>
  <mt-tab-item id="user">
    <img slot="icon"  :src="selected=='user'?'https://media.kaolaplay.com/person.png':'https://media.kaolaplay.com/person1.png'">
  </mt-tab-item>
</mt-tabbar>
 </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      selected: "home"
    };
  },
  watch: {
    selected: function(val, oldVal) {
    
     if(val=="user"){
this.$router.push({
        path: "/personal"
      });
     }else{
 this.$router.push({
        path: "/index"
      });
     }
    }
  },
  methods: {
   setSelected(selected){
     console.log(selected)
     this.selected = selected
   }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
